﻿<template>
	<div class="xuanKe-container">
		<el-dialog v-model="isShowDialog" draggable="" fullscreen>
			<template #header>
				<div style="color: #fff">
					<!--<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>-->
					<span>
						{{ props.title }}
					</span>
				</div>
			</template>
			<el-row class="row-con">
				<el-col :span="24">
					周次：
					<el-select
						v-model="zhouci"
						placeholder="请选择周次"
						size="large"
						style="max-width: 100px"
						@change="handleSelectChange"
						>
						<el-option
							v-for="item in zhouciOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
						</el-select>
						<el-date-picker
							v-model="selectDate"
							type="date"
							placeholder="请选择日期"
							:disabled-date="disabledDate"
							style="max-width: 120px;"
						></el-date-picker>
						<el-button @click="init">全部打√</el-button>
				</el-col>
			</el-row>

			<el-row class="row-con">
				<el-col :span="24">
					<el-table
					:data="tableData"
					style="width: 100%"
					v-loading="loading"
					tooltip-effect="light"
					row-key="id"
					border="">
						<el-table-column prop="studentIdXh" label="学号" width="60" show-overflow-tooltip="">
						<template #default="scope">
							<span>{{scope.row.studentIdXh}}</span>
						</template>
						</el-table-column>
						
						<el-table-column prop="studentIdName" label="学生" width="80" show-overflow-tooltip="">
						<template #default="scope">
							<span>{{scope.row.studentIdName}}</span>
						</template>
						</el-table-column>
						<el-table-column prop="dianming" label="第1周" width="120" show-overflow-tooltip="" v-if="zhouci == 1" >
							<template #default="scope">
								<el-select
									v-model="scope.row.chuqin1"
									clearable
									placeholder="请选择出勤情况"
									style="max-width:100px;"
								>
									<el-option
									v-for="item in chuqianOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									/>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="dianming" label="第2周" width="120" show-overflow-tooltip="" v-if="zhouci == 2">
							<template #default="scope">
								<el-select
									v-model="scope.row.chuqin2"
									clearable
									placeholder="请选择出勤情况"
									style="max-width:100px;"
								>
									<el-option
									v-for="item in chuqianOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									/>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="dianming" label="第3周" width="120" show-overflow-tooltip="" v-if="zhouci == 3">
							<template #default="scope">
								<el-select
									v-model="scope.row.chuqin3"
									clearable
									placeholder="请选择出勤情况"
									style="max-width:100px;"
								>
									<el-option
									v-for="item in chuqianOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									/>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="dianming" label="第4周" width="120" show-overflow-tooltip="" v-if="zhouci == 4">
							<template #default="scope">
								<el-select
									v-model="scope.row.chuqin4"
									clearable
									placeholder="请选择出勤情况"
									style="max-width:100px;"
								>
									<el-option
									v-for="item in chuqianOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									/>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="dianming" label="第5周" width="120" show-overflow-tooltip="" v-if="zhouci == 5">
							<template #default="scope">
								<el-select
									v-model="scope.row.chuqin5"
									clearable
									placeholder="请选择出勤情况"
									style="max-width:100px;"
								>
									<el-option
									v-for="item in chuqianOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									/>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="dianming" label="第6周" width="120" show-overflow-tooltip="" v-if="zhouci == 6">
							<template #default="scope">
								<el-select
									v-model="scope.row.chuqin6"
									clearable
									placeholder="请选择出勤情况"
									style="max-width:100px;"
								>
									<el-option
									v-for="item in chuqianOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									/>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="dianming" label="第7周" width="120" show-overflow-tooltip="" v-if="zhouci == 7">
							<template #default="scope">
								<el-select
									v-model="scope.row.chuqin7"
									clearable
									placeholder="请选择出勤情况"
									style="max-width:100px;"
								>
									<el-option
									v-for="item in chuqianOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									/>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="dianming" label="第8周" width="120" show-overflow-tooltip="" v-if="zhouci == 8">
							<template #default="scope">
								<el-select
									v-model="scope.row.chuqin8"
									clearable
									placeholder="请选择出勤情况"
									style="max-width:100px;"
								>
									<el-option
									v-for="item in chuqianOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									/>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="dianming" label="第9周" width="120" show-overflow-tooltip="" v-if="zhouci == 9">
							<template #default="scope">
								<el-select
									v-model="scope.row.chuqin9"
									clearable
									placeholder="请选择出勤情况"
									style="max-width:100px;"
								>
									<el-option
									v-for="item in chuqianOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									/>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="dianming" label="第10周" width="120" show-overflow-tooltip="" v-if="zhouci == 10">
							<template #default="scope">
								<el-select
									v-model="scope.row.chuqin10"
									clearable
									placeholder="请选择出勤情况"
									style="max-width:100px;"
								>
									<el-option
									v-for="item in chuqianOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									/>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="dianming" label="第11周" width="120" show-overflow-tooltip="" v-if="zhouci == 11">
							<template #default="scope">
								<el-select
									v-model="scope.row.chuqin11"
									clearable
									placeholder="请选择出勤情况"
									style="max-width:100px;"
								>
									<el-option
									v-for="item in chuqianOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									/>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="dianming" label="第12周" width="120" show-overflow-tooltip="" v-if="zhouci == 12">
							<template #default="scope">
								<el-select
									v-model="scope.row.chuqin12"
									clearable
									placeholder="请选择出勤情况"
									style="max-width:100px;"
								>
									<el-option
									v-for="item in chuqianOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									/>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="dianming" label="第13周" width="120" show-overflow-tooltip="" v-if="zhouci == 13">
							<template #default="scope">
								<el-select
									v-model="scope.row.chuqin13"
									clearable
									placeholder="请选择出勤情况"
									style="max-width:100px;"
								>
									<el-option
									v-for="item in chuqianOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									/>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="dianming" label="第14周" width="120" show-overflow-tooltip="" v-if="zhouci == 14">
							<template #default="scope">
								<el-select
									v-model="scope.row.chuqin14"
									clearable
									placeholder="请选择出勤情况"
									style="max-width:100px;"
								>
									<el-option
									v-for="item in chuqianOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									/>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="dianming" label="第15周" width="120" show-overflow-tooltip="" v-if="zhouci == 15">
							<template #default="scope">
								<el-select
									v-model="scope.row.chuqin15"
									clearable
									placeholder="请选择出勤情况"
									style="max-width:100px;"
								>
									<el-option
									v-for="item in chuqianOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									/>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="dianming" label="第16周" width="120" show-overflow-tooltip="" v-if="zhouci == 16">
							<template #default="scope">
								<el-select
									v-model="scope.row.chuqin16"
									clearable
									placeholder="请选择出勤情况"
									style="max-width:100px;"
								>
									<el-option
									v-for="item in chuqianOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									/>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="dianming" label="第17周" width="120" show-overflow-tooltip="" v-if="zhouci == 17">
							<template #default="scope">
								<el-select
									v-model="scope.row.chuqin17"
									clearable
									placeholder="请选择出勤情况"
									style="max-width:100px;"
								>
									<el-option
									v-for="item in chuqianOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									/>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="dianming" label="第18周" width="120" show-overflow-tooltip="" v-if="zhouci == 18">
							<template #default="scope">
								<el-select
									v-model="scope.row.chuqin18"
									clearable
									placeholder="请选择出勤情况"
									style="max-width:100px;"
								>
									<el-option
									v-for="item in chuqianOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									/>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="dianming" label="第19周" width="120" show-overflow-tooltip="" v-if="zhouci == 19">
							<template #default="scope">
								<el-select
									v-model="scope.row.chuqin19"
									clearable
									placeholder="请选择出勤情况"
									style="max-width:100px;"
								>
									<el-option
									v-for="item in chuqianOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									/>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="dianming" label="第20周" width="120" show-overflow-tooltip="" v-if="zhouci == 20">
							<template #default="scope">
								<el-select
									v-model="scope.row.chuqin20"
									clearable
									placeholder="请选择出勤情况"
									style="max-width:100px;"
								>
									<el-option
									v-for="item in chuqianOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									/>
								</el-select>
							</template>
						</el-table-column>
				</el-table>
				</el-col>
			</el-row>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="submit">确 定</el-button>
					<el-button @click="cancel">关闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<style scoped>
:deep(.el-select),
:deep(.el-input-number) {
	width: 100%;
}
</style>
<script lang="ts" setup>
	import { ref,onMounted } from "vue";
	import { getDictDataItem as di, getDictDataList as dl } from '/@/utils/dict-utils';
	import { ElMessage } from "element-plus";
	import type { FormRules } from "element-plus";
	import { pageListByTeacherId,saveChuqin } from '/@/api/main/myXuanke';
	import { getCurXueqi } from '/@/api/main/xuenianXueqi';

	//父级传递来的参数
	var props = defineProps({
		title: {
		type: String,
		default: "",
	},
	});
	//父级传递来的函数，用于回调
	const emit = defineEmits(["reloadTable"]);
	const ruleFormRef = ref();
	const isShowDialog = ref(false);
	const ruleForm = ref<any>({});
	//自行添加其他规则
	const rules = ref<FormRules>({
	});

	const curXueqi = ref();
	const startDate = ref();
	const endDate = ref();
	const selectDate = ref();

	const zhouci = ref("1");
	const tableData = ref<any>([]);
	const loading = ref(false);

	const zhouciOptions = [
	{value: '1',label: '第1周'},
	{value: '2',label: '第2周'},
	{value: '3',label: '第3周'},
	{value: '4',label: '第4周'},
	{value: '5',label: '第5周'},
	{value: '6',label: '第6周'},
	{value: '7',label: '第7周'},
	{value: '8',label: '第8周'},
	{value: '9',label: '第9周'},
	{value: '10',label: '第10周'},
	{value: '11',label: '第11周'},
	{value: '12',label: '第12周'},
	{value: '13',label: '第13周'},
	{value: '14',label: '第14周'},
	{value: '15',label: '第15周'},
	{value: '16',label: '第16周'},
	{value: '17',label: '第17周'},
	{value: '18',label: '第18周'},
	{value: '19',label: '第19周'},
	{value: '20',label: '第20周'}
	];
	const chuqianOptions = [
	{value: '√',label: '√'},
	{value: '事假',label: '事假'},
	{value: '病假',label: '病假'},
	{value: '旷课',label: '旷课'}
	];
	// 打开弹窗
	const openDialog = async (row: any) => {
		selectDate.value = undefined;
		tableData.value = (await pageListByTeacherId({kechengId:row.id})).data?.result?.items ?? [];
		isShowDialog.value = true;
	};

	// 关闭弹窗
	const closeDialog = () => {
		emit("reloadTable");
		isShowDialog.value = false;
	};

	// 取消
	const cancel = () => {
		isShowDialog.value = false;
		closeDialog();
	};

	const init = () => {
		for (let index = 0; index < tableData.value.length; index++) {
			console.log(zhouci.value);
			switch (zhouci.value) {
				case "1": tableData.value[index].chuqin1 = '√'; break;
				case "2": tableData.value[index].chuqin2 = '√'; break;
				case "3": tableData.value[index].chuqin3 = '√'; break;
				case "4": tableData.value[index].chuqin4 = '√'; break;
				case "5": tableData.value[index].chuqin5 = '√'; break;
				case "6": tableData.value[index].chuqin6 = '√'; break;
				case "7": tableData.value[index].chuqin7 = '√'; break;
				case "8": tableData.value[index].chuqin8 = '√'; break;
				case "9": tableData.value[index].chuqin9 = '√'; break;
				case "10": tableData.value[index].chuqin10 = '√'; break;
				case "11": tableData.value[index].chuqin11 = '√'; break;
				case "12": tableData.value[index].chuqin12 = '√'; break;
				case "13": tableData.value[index].chuqin13 = '√'; break;
				case "14": tableData.value[index].chuqin14 = '√'; break;
				case "15": tableData.value[index].chuqin15 = '√'; break;
				case "16": tableData.value[index].chuqin16 = '√'; break;
				case "17": tableData.value[index].chuqin17 = '√'; break;
				case "18": tableData.value[index].chuqin18 = '√'; break;
				case "19": tableData.value[index].chuqin19 = '√'; break;
				case "20": tableData.value[index].chuqin20 = '√'; break;
				default:
					break;
			}
		}
	};

	// 提交
	const submit = async (data:any) => {
		if(selectDate.value === undefined){
			ElMessage.error('请选择日期！');
			return;
		}
		await saveChuqin({zhouci:zhouci.value,data:tableData.value})
		closeDialog();
	};

	const handleSelectChange = (value:any) => {
	  var currentDate = new Date();
	  currentDate.setDate(new Date(curXueqi.value.startDate).getDate() + 7*(parseInt(value)-1) - 1);
	  startDate.value = formatDate(currentDate,'YYYY-MM-DD');
	  currentDate.setDate(new Date(startDate.value).getDate() + 7);
	  endDate.value = formatDate(currentDate,'YYYY-MM-DD');
	  console.log(zhouci.value);
	  console.log(startDate.value);
	  console.log(endDate.value);
    }

	const disabledDate = (time:Date) => {
      return time.getTime() <  (new Date(startDate.value)).getTime() || time.getTime() >  (new Date(endDate.value)).getTime(); // 8.64e7 毫秒数代表一天
    };

	const formatDate = (date:Date, format:any) => {
		var day = date.getDate(),
			month = date.getMonth() + 1,
			year = date.getFullYear(),
			hours = date.getHours(),
			minutes = date.getMinutes(),
			seconds = date.getSeconds();

		// 补零函数
		function pad(n) {
			return n < 10 ? '0' + n : n;
		}

		// 替换格式字符串中的占位符
		format = format.replace('YYYY', year);
		format = format.replace('MM', pad(month));
		format = format.replace('DD', pad(day));
		format = format.replace('HH', pad(hours));
		format = format.replace('mm', pad(minutes));
		format = format.replace('ss', pad(seconds));

		return format;
	}

	// 页面加载时
	onMounted(async () => {
		curXueqi.value = (await getCurXueqi()).data?.result;
		var currentDate = new Date();
	  	currentDate.setDate(new Date(curXueqi.value.startDate).getDate()-1);
	  	startDate.value = formatDate(currentDate,'YYYY-MM-DD');
		currentDate.setDate(new Date(curXueqi.value.startDate).getDate()+6);
		endDate.value = formatDate(currentDate,'YYYY-MM-DD');;
	});

	//将属性或者函数暴露给父组件
	defineExpose({ openDialog });
</script>




